<template>
	<view class="content">
		<view class="date">{{date}}</view>
		<view class="ren">

			<template v-if="islogin">
				<image style="width: 120rpx; height: 120rpx;" :src=userInfo.avatarUrl mode="scaleToFill"></image>
				<text>{{userInfo.nickName}}</text>
			</template>
			<template v-else>
				<button type="default" @click="getwxlogin">微信登录</button>
			</template>
		</view>


		<view class="example-body">
			<view class="">选择金额</view>
			<uni-grid :column="10" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in items" :index="index" :key="index">
					<view class="grid-item-box" v-bind:class="[index===jinecunrrent ? activeClass : '', errorClass]">
						<text class="text">￥{{item}}</text>

					</view>
				</uni-grid-item>
			</uni-grid>
		</view>


		<view class="">

			<view class="kdzr">卡的主人</view>
			<label>
				<checkbox :value="dd" checked="true" /><text>张康利</text>
			</label>

		</view>
		<view class="commit">
			<button type="default" @click="commitorder">提交</button>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				islogin: false,
				isActive: true,
				activeClass: 'active',
				errorClass: 'text-danger',
				current: 0,
				jinecunrrent: 100,

				userInfo: {},
				userInfo2: {}
			}
		},
		computed: {
			date() {
				return new Date().getFullYear() +
					"-" + (new Date().getMonth() + 1) +
					"-" + new Date().getDate() +
					" " + new Date().getHours() +
					":" + new Date().getMinutes() +
					":" + new Date().getUTCSeconds()
			},
			jine() {
				return this.items[this.jinecunrrent];
			},
			items() {
				let strs = [];
				for (let i = 0; i < 200; i++) {
					strs[i] = i
				}
				const newstrs = strs.map(e => {

					return (e * 0.1).toFixed(1) * 1
				})
				return newstrs
			}


		},
		onLoad() {


		},
		onShow() {
			this.storage_userInfo()
		},
		methods: {

			storage_userInfo() {
				uni.getStorage({
					key: 'storage_userInfo',
					success: function(res) {
						console.log('storage_userInfo2', res.data);
						// const userInfo2 = res.data
						// const islogin2 = true
						// console.log('storage_userInfo1', userInfo2);
						// this.userInfo = res.data
						//为什么不能直接赋值给userInfo
					}
				});



			},

			getwxlogin() {
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log("getUserProfile", res)
						this.userInfo = res.userInfo
						this.islogin = true
						uni.setStorage({
							key: 'storage_userInfo',
							data: res.userInfo

						});

					}
				})
			},


			change(e) {
				console.log(this.date)
				let {
					index
				} = e.detail
				this.jinecunrrent = index;
				this.order = this.items[index]
			},

			async commitorder() {
				console.log('nickName',this.userInfo)
				// if (this.userInfo === {}) {
				// 	uni.showModal({
				// 		content: "请先登录",
				// 		showCancel: false,
				// 		success() {
				// 			uni.hide
				// 		}
				// 	})
				// 	return 
				// }

				uni.showModal({
					title: '账单' + this.date,
					content: `金额` + this.order +
						`消费人：` + this.userInfo.nickName,
					success: res => {
						if (res.confirm) {
							uniCloud.callFunction({
								name: "addorder",
								data: {
									order: this.order,
									kadezhuren: "张康利",
									username: this.userInfo.nickName,
									date: this.date
								}
							}).then(res => {
								uni.showModal({
									content: "添加成功",
									showCancel: false
								})
								return res.result
							}).catch(error => {
								uni.showModal({
									content: "添加失败",
									showCancel: false
								})
							})

						} else {
							uni.hide
						}
					}

				})





			}

		}
	}
</script>

<style>
	.content {
		margin: 20rpx;
		background-color: #EEEEEE;
	}

	.date {
		margin: 20rpx;
	}

	.ren {
		margin: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		box-shadow: $box-shadow;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.active {
		background-color: #ffd400;
	}

	.text-danger {
		font-size: 60rpx;
	}

	.uni-list-cell {
		justify-content: flex-start;
		display: flex
	}

	.kdzr {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.commit {
		margin: 20rpx;
	}

	.example-body {
		margin: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}


	.text {
		font-size: 20rpx;

	}
</style>
